<template>
  <vxe-grid border :data="tableData" :columns="columns"> </vxe-grid>
</template>
<script>
export default {
  data() {
    return {
      columns: [],
      tableData: [],
    };
  },
  created() {
    this.$api.getFullCount({ startTime: '2023-01', endTime: '2023-09' }).then((res) => {
      const dateList = Object.values(res.data)[0];
      let startColumns = [{ title: '时间', field: 'projectName' }];
      let endColumn = [
        { title: '完成', field: 'projectName', width: 100, align: 'center', field: 'finish' },
        { title: '未上传', field: 'projectName', width: 100, align: 'center', field: 'fail' },
      ];
      const columns = [
        ...startColumns,
        ...dateList.map((item) => {
          return {
            width: 100,
            align: 'center',
            title: item.fillMonth,
            field: item.fillMonth,
            slots: {
              default: ({ row, column }, h) => {
                return row[column.field]
                  ? h('img', {
                      attrs: {
                        style: 'display: block; width: 24px; height: 24px;margin: auto',
                        src: require('/@/assets/images/icon/icon_wancheng_xiao.png'),
                      },
                    })
                  : h('img', {
                      attrs: {
                        style: 'display: block; width: 24px; height: 24px;margin: auto',
                        src: require('/@/assets/images/icon/icon_weiwancheng.png'),
                      },
                    });
              },
            },
          };
        }),
        ...endColumn,
      ];
      this.columns = columns;
      this.tableData = Object.keys(res.data).map((name) => {
        return {
          projectName: name,
          ...res.data[name].reduce((prev, item) => {
            prev[item.fillMonth] = !!item.orgId;
            return prev;
          }, {}),
          finish: 15,
          fail: 0,
        };
      });
    });
  },
};
</script>
<style lang="scss" scoped>
.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
}
</style>
